<template>
  <view class="" style="">

    <!-- title-->
    <view class="">
      <my-navbar :widthdata="titlewid">
        <template #icons>
          <uni-icons @click="back" color="white" type="left" size="20"> </uni-icons>
        </template>

        <template #title>
          <span id="myView" ref="myView" style="color: white;">支付订单</span>
        </template>
      </my-navbar>
    </view>


    <!-- //main -->
    <view class="pay" style="text-align: center;padding-top: 20%;padding-bottom: 50px;">
      <view style="color: #ccc;padding-bottom: 10px;font-size: 14px;"><text>支付剩余时间{{remainingTime}}</text></view>
      <view style="padding-bottom: 10px;">￥<text style="font-size:20px;">{{orderdata.orderAmount}}</text></view>
      <view style="color: #ccc;font-size: 14px;">苍穹餐厅-{{orderdata.phone}}</view>
    </view>


    <!--选择支付种类，微信还是支付宝  -->
    <view class="" style="display: flex; justify-content: space-between;align-items: center;">
      <view class="" style="padding-left: 10px;display: flex;">
        <image style="width: 20px;height: 20px;" src="@/static/wechat.png" mode=""></image>
        <view class="" style="padding-left: 5px;line-height: 18px;">
          <span style="font-size: 14px;">微信支付</span>
        </view>
      </view>

      <view class="" style="width: 30px;">

        <checkbox class="checkbox.red" :class="{'checkbox.red': payMethod}" :checked="payMethod===1"
          @click="setpayMethod" />


      </view>
    </view>


    <view class="" style="position: absolute;bottom: 20rpx;">
      <van-button @click="pay" color="orange">确认支付</van-button>

    </view>

  </view>
</template>

<script>
  import
  Bus
  from '@/utils/EventBus';
  import {
    deleteOrder,
    payOrder
  } from '@/api/order.js'
  export default {
    //  name: 'payIndex',
    data() {
      return {
        titlewid: 0,
        payMethod: 0,
        wh: 0,
        orderdata: '',
        minute: '',
        seconds: '',
        timer: null,
        remainingSeconds: 10 * 60, // 倒计时总秒数，15分钟
      };
    },
    onLoad(options) {
      const systemInfo = uni.getWindowInfo()
      this.wh = systemInfo.safeArea.height / 2.2
      this.orderdata = JSON.parse(options.orderdata);

      console.log(options.orderdata, "options")

    },

    methods: {
      //订单支付
      async pay() {
        const payment = {
          orderNumber: this.orderdata.orderNumber,
          payMethod: this.payMethod
        }
        if (this.payMethod !== 0) {
          const res = await payOrder(payment)
          console.log(res, "res")
          if (res.code === 1) {
            uni.removeStorageSync("cart")
            uni.navigateTo({
              url: '/subpkg/ordersuccess/ordersuccess'
            })
          }
        } else {
          uni.showToast({
            title: '请先选中支付方式',
            icon: 'none',
            duration: 1000
          });
        }

      },

      setpayMethod() {
        this.payMethod = 1

      },
      back() {
        uni.navigateTo({
          url: '/pages/home/home'
        })
      },
      startTimer() {
        this.timer = setInterval(() => {
          if (this.remainingSeconds > 0) {
            this.remainingSeconds -= 1;
          } else {
            //倒计时结束后的逻辑
            // 根据订单编号删除订单
            deleteOrder(this.orderdata.orderNumber)


            uni.navigateTo({
              url: '/pages/home/home'
            })
            this.clearTimer();
          }
        }, 1000);
      },
      clearTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }
    },
    computed: {
      remainingTime() {
        let minutes = Math.floor(this.remainingSeconds / 60);
        let seconds = this.remainingSeconds % 60;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        return minutes + ":" + seconds;
      }
    },
    onUnload() {
      this.clearTimer();

    },
    mounted() {
      let info = uni.createSelectorQuery().in(this).select('#myView');
      info.boundingClientRect(data => {
        // console.log(data, "data")
        this.titlewid = data.width
      }).exec()

      this.startTimer();
    },
  }
</script>

<style lang="scss" scoped>
  /deep/ checkbox.red .wx-checkbox-input {
    border-radius: 50%;
    width: 18px;
    height: 18px;
  }

  /*  < !---背景色设置---> */
  /deep/ checkbox.red[checked] .wx-checkbox-input,
  checkbox.red.checked .uni-checkbox-input {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    background-color: orange !important;
    border-color: white;
    color: black;
  }


  /deep/ .van-button.van-button--default.van-button--normal {
    width: 400px;
  }
</style>